<template>
	<view class="wrap"  :style="viewColor">
		<view class="list-main" v-show="order">
		    <view class="display-flex-column">
				<view class="row-center tytop">
					<view class="type-desc">
						酒店
					</view>
					<view class="add_time">
						下单时间：{{order.create_time}}
					</view>
					<view class="status_desc">
						{{statusText(order.order_status)}}
					</view>
				</view>
				<view class="row" style="margin-bottom: 15px;">
					<view class="display-flex-column">
						<view class="row-center ml-10">
							
							<view class=" text-black ft-w700 text-16">
								{{order.hotel_name}}
							</view>
						</view>
						
				
						
						<view class="row-center ml-10 mt-10">
							<view class="text-12">
								{{order.check_in_date}} 至 {{order.check_out_date}}
							</view>
							<view class="text-12 ml-5">
								{{order.room_count}}间
							</view>
						</view>
						<view class="row-center ml-10 mt-10">
							<view class="text-12 line2">
								{{order.nights}}晚·{{order.room_type_name}}·{{order.package_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="row-center" style="margin: 14px 5px;">
					<view class="ml-10 color-999 text-12">
						支付金额
					</view>
					<view  class="dan">
					￥{{order.pay_amount}}
					</view>

				</view>
				
			</view>
		</view>
		
		<view class="bg-white p-20 mt-10 ml-10 mr-10 br-10" >
			<view class="ft-w700 text-black  text-16 ">订单明细</view>
			<view class="display-flex display-flex-justify-space-between mt-10">
				<view class="color-999">
					订单金额
				</view>
				<view class="text-14 text-black ft-w500">
					<text class="mr-5"><text class="text-10">￥</text>{{order.pay_amount}}</text>
					<text>{{order.room_count}}间</text>
					<text>{{order.nights}}晚</text>
				</view>
			</view>
			<view v-if="order.price_details && order.price_details.length" class="display-flex display-flex-justify-space-between mt-10" v-for="(day,dayIndex) in order.price_details" :key="dayIndex">
				<view class="color-999">
					{{day.date}}
				</view>
				<view class="text-14 text-black ft-w500">
					<text>{{day.room_count}}</text>
					<text>x</text>
					<text class="ml-5"><text class="text-10">￥</text>{{day.price}}</text>
				</view>
			</view>
		</view>
		
	   
		<view class="ex-main row-center address-box " style="height: 70px;margin: 10px 15px;border-radius: 5px;">
		
			<view v-if="order.hotel.address" class="u-skeleton-rect " style="margin-left: 10px;">
				<view style="color: #000;font-size: 12px;" class="text-ellipsis" v-if="order.hotel.address">
				{{order.hotel.address}}</view>
				
			</view>
			<view @click="goScenicArea(order.hotel.lng,order.hotel.lat,order.hotel.name)" class="display-flex-column u-skeleton-rect" style="margin-left: auto;margin-right: 10px;align-items: center;">
				<image style="width: 16px;height: 16px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/156876be9ccb076370d2da645750a138.webp" mode=""></image>
				<view class="" style="color: #343434;font-size: 12px;font-weight: 400;margin-top: 5px;">
					<text>地图</text>
				</view>
			</view>
					
		</view>
		<view style="position:fixed;bottom:0;left:0;right:0;padding:20rpx 24rpx;padding-bottom:20rpx;background-color: #fff;">
			<!-- <view @click="orderCancel" v-if="order.order_status == 0"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >取消订单</view> -->
			<view v-if="order.order_status == -1"  class="gr-c-button" >待退款</view>
			<view v-if="order.order_status == -2" class="gr-c-button" >已退款</view>
			<view v-if="order.order_status == 5"  class="gr-c-button" >已取消</view>
			<view  v-if="order.order_status == 3" class="main-c-button" >已入住</view>
			<view v-if="order.order_status ==1"  class="display-flex">
				<view  class="main-c-button" style="width: 70%; margin-right: 15px" >待确认</view>
				<view class="gr-c-button" @click="goRefund">申请退款</view>
			</view>
			<view v-if="order.order_status ==2"  class="display-flex">
				<view  class="main-c-button" style="width: 70%; margin-right: 15px" >待入住</view>
				<view class="gr-c-button"  @click="goRefund">申请退款</view>
			</view>
			
			<view @click="goPay" v-if="order.order_status == 0"  class="main-c-button"  >立即支付</view>
			<view v-if="order.order_status == 4"  class="main-c-button"  >已完成</view>
		</view>
		
		
		<payment :payMode='payMode' :is-call="true" :pay_close="pay_close" @onChangeFun='onChangeFun' 
			:totalPrice='totalPrice'></payment>
	</view>	
</template>

<script>
	import {
			mapGetters
		} from "vuex";
	import { configMap } from "@/utils";
		
	import {
		toLogin
	} from '@/libs/login.js';
	
	import { getHotelOrderDetail,cancelOrder } from "@/api/hotel.js"
    import {  orderHotelPay } from "@/api/hotel.js"
    import payment from '@/components/payment';
      
	export default {
		computed: configMap({no_image: "https://qiniu.gzyxly.cn/def/3ce36202509191258161967.jpg"},
		mapGetters(['uid','isLogin','viewColor','keyColor'])),
		
		components:{
			payment
		},
		data() {
			return {
				order_id:'',
				baoche_id: '',
				order: '',
				order_type: 0,
				pay_close: false,
				totalPrice: 0,
				payType: 'weixin', //支付方式
				pay_type: '',
				//支付方式
				payMode: [
					// #ifdef MP-WEIXIN
					{
					name: '微信支付',
					icon: 'icon-a-ic_wechatpay',
					value: 'routine',
					title: '微信快捷支付',
					payStatus: true
					},
					// #endif
					// #ifdef MP-ALIPAY
					{
					name: '支付宝支付',
					icon: 'icon-a-ic_alipay',
					value: 'alipayRoutine',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					// #ifdef MP-BAIDU
					{
					name: '百度支付',
					icon: 'icon-baidu-zhifu',
					value: 'baiduRoutine',
					title: '百度支付',
					payStatus: true
					}
					// #endif
					
				],
				
			};
		},
		onShow() {
			if(this.isLogin == true){
				uni.showLoading({
					title:'请稍后...'
				})
				 this.userHotelOrderDetail()
			}
			
	
		},
		onLoad(option) {
			if(this.isLogin){
			} else {
				toLogin()
			}
			this.order_id= option.order_id;
			
			// #ifdef H5
			this.pay_type = this.$wechat.isWeixin() ? 'weixin' : 'h5';
			// #endif
			// #ifdef APP-PLUS
			this.pay_type = 'weixin';
			// #endif
			// #ifdef MP-WEIXIN
			this.pay_type = 'routine';
			// #endif
			// #ifdef MP-ALIPAY
			this.pay_type = 'alipayRoutine';
			// #endif
			// #ifdef MP-BAIDU
			this.pay_type = 'baiduRoutine';
			// #endif
			
		},
		onReady() {
		},
		methods:{
			goRefund(){
				uni.navigateTo({
					url:'/pages/hotel/refund_confirm?order_id='+this.order_id
				})
			},
			statusText(order_status) {
			     const textMap = {
			       0: '待支付',
			       1: '待确认',
			       2: '待入住',
			       3: '已入住',
			       4: '已完成',
			       '5': '已取消',
				   '-1': '待退款',
				   '-2': '已退款',
			     }
			     return textMap[order_status] || '未知状态'
			   },
			goPay() {
			
				this.pay_close = true;
			},

             /**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			
			payCheck(type) {
				
				this.payType = type;
			
				this.SubOrder();
			},
			SubOrder: function(e) {
				let that = this,
					data = {};
			  
				if (!that.payType) return that.$util.Tips({
					title: '请选择支付方式'
				});
				
				// if (that.order_type !=1 || that.order_type!=0 ) return that.$util.Tips({
				// 	title: '参数错误'
				// });
			    
				
				// if (data.payType == 'yue' && parseFloat(that.userInfo.now_money) < parseFloat(that.totalPrice))
				// 	return that.$util.Tips({
				// 		title: '余额不足！'
				// 	});
			
				uni.showLoading({
					title: '订单支付中'
				});
				that.payment();
			},
			
			payment: function(data) {
			
				let that = this;
			    uni.showLoading({
			    	title:'请稍后...'
			    })
			    
				let type = '';
				let paytype = this.pay_type;
				if (paytype == 'weixin') {
					// #ifdef H5
					type = this.$wechat.isWeixin() ? 'weixin' : 'h5';
					// #endif
					// #ifdef APP-PLUS
					type = 'weixin';
					// #endif
					// #ifdef MP
					type = 'routine';
					// #endif
				} else if(paytype == 'routine'){
						type = 'routine';
				}else if (paytype == 'balance') {
					type = 'balance';
				}else if(paytype == 'alipay'){
					// #ifndef MP
					type = 'alipay';
					// #endif					
					// #ifdef MP
					type = 'alipayQr';
					// #endif
				} else if(paytype == 'alipayRoutine'){
					// 支付宝小程序
					type = 'alipayRoutine';
				}else if(paytype == 'baiduRoutine'){
					// 百度小程序付
					type = 'baiduRoutine';
				}else if (paytype == 'offline') {
					type = 'offline';
				}
				if (!that.order_id)
					return that.$util.Tips({
						title: '请选择要支付的订单22'
					});
				if (paytype == 'balance' && parseFloat(this.number) < parseFloat(that.payPrice))
					return that.$util.Tips({
						title: '余额不足！'
					});
				uni.showLoading({
					title: '支付中'
				});
				orderHotelPay(that.order_id, {
					type: type,
					// #ifdef H5
					return_url: 'http://' + window.location.host + '/pages/users/order_list/index'
					// #endif
				})
					.then((res) => {
						let status = res.data.status,
							orderId = res.data.result.order_id,
							jsConfig = res.data.result.config,
							callback_key = res.data.result.pay_key,
							goPages = '/pages/hotel/order_hotel_pay_status?order_id=' + orderId + '&msg=' + res.message;
						switch (status) {
							case 'ORDER_EXIST':
							case 'EXTEND_ORDER':
							case 'PAY_ERROR':
							case 'error':
								uni.hideLoading();
								this.$emit('onChangeFun', {
									action: 'payClose'
								});
								return that.$util.Tips({
									title: res.message
								});
								break;
							case 'success':
								uni.hideLoading();
								this.$emit('onChangeFun', {
									action: 'payClose'
								});
								let jumpType = type == 'offline' ? '&status=0' : '&status=1';
								return that.$util.Tips(
									{
										title: type == 'offline' ? '订单创建成功' : '支付成功',
										icon: 'success'
									},
									{
										tab: 5,
										url: goPages + jumpType
									}
								);
								break;
							case 'alipay':
							case 'alipayQr':
								uni.hideLoading();
								this.$emit('onChangeFun', {
									action: 'payClose'
								});
								uni.navigateTo({
									url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' + jsConfig
								});
								return;
								break;
							// #ifndef MP
							case 'wechat':
							case 'weixin':
							case 'weixinApp':
								jsConfig.timeStamp = jsConfig.timestamp;
								// #ifndef APP-PLUS
								that.$wechat
									.pay(jsConfig)
									.then((res) => {
										console.log('测试支付数据无效的success：' + res.data);
										this.$emit('onChangeFun', {
											action: 'payClose'
										});
										uni.hideLoading();
										return that.$util.Tips(
											{
												title: '支付成功',
												icon: 'success'
											},
											{
												tab: 5,
												url: goPages + 'status=1'
											}
										);
									})
									.catch((res) => {
										console.log('测试支付数据无效的catch：' + res.data);
										if (res.errMsg == 'chooseWXPay:cancel') {
											return that.$util.Tips(
												{
													title: '取消支付'
												},
												{
													tab: 5,
													url: goPages + '?status=0'
												}
											);
										}
									});
								// #endif
								// #ifdef APP-PLUS
								let mp_pay_name = '';
								if (uni.requestOrderPayment) {
									mp_pay_name = 'requestOrderPayment';
								} else {
									mp_pay_name = 'requestPayment';
								}
								uni[mp_pay_name]({
									provider: 'wxpay',
									orderInfo: jsConfig,
									success: (e) => {
										this.$emit('onChangeFun', {
											action: 'payClose'
										});
										return that.$util.Tips(
											{
												title: '支付成功',
												icon: 'success'
											},
											{
												tab: 5,
												url: goPages + 'status=1'
											}
										);
									},
									fail: (e) => {
										return that.$util.Tips(
											{
												title: '取消支付'
											},
											{
												tab: 5,
												url: goPages + '?status=0'
											}
										);
									},
									complete: () => {
										uni.hideLoading();
									}
								});
								// #endif
								break;
							// #endif
							// #ifdef MP
							case 'routine':
								jsConfig.timeStamp = jsConfig.timestamp;
								that.toPay = true;
								let mp_pay_name = '';
								if (uni.requestOrderPayment) {
									mp_pay_name = 'requestOrderPayment';
								} else {
									mp_pay_name = 'requestPayment';
								}
								uni[mp_pay_name]({
									...jsConfig,
									success: function (res) {
										uni.hideLoading();
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
										if (that.BargainId || that.combinationId || that.pinkId || that.seckillId)
											return that.$util.Tips(
												{
													title: '支付成功',
													icon: 'success'
												},
												{
													tab: 5,
													url: goPages + '?status=1'
												}
											);
				
										return that.$util.Tips(
											{
												title: '支付成功',
												icon: 'success'
											},
											{
												tab: 5,
												url: goPages + '?status=1'
											}
										);
									},
									fail: function (e) {
										uni.hideLoading();
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
										return that.$util.Tips({
											title: '取消支付'
										});
									},
									complete: function (e) {
										uni.hideLoading();
										//关闭当前页面跳转至订单状态
										if (res.errMsg == 'requestPayment:cancel')
											return that.$util.Tips({
												title: '取消支付'
											});
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
									}
								});
								break;
							case "alipayRoutine":
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: jsConfig.trade_no,
									success: function(res) {
										uni.hideLoading();
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {
											tab: 5,
											url: goPages
										});
									},
									fail: function(e) {
										uni.hideLoading();
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
										return that.$util.Tips({
											title: '取消支付'
										});
									},
								})
								
								break;	
								
							case "baiduRoutine":
								uni.requestPayment({
									provider: 'baidu',
									orderInfo: jsConfig,
									success: function(res) {
										uni.hideLoading();
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {
											tab: 5,
											url: goPages
										});
									},
									fail: function(e) {
										uni.hideLoading();
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
										return that.$util.Tips({
											title: '取消支付'
										});
									},
								})
							
							    break;		
								
							// #endif
							
							case 'balance':
								uni.hideLoading();
								that.$emit('onChangeFun', {
									action: 'payClose'
								});
								//余额不足
								return that.$util.Tips({
									title: res.message
								});
								break;
							// #ifdef H5
							case 'h5':
								let host = window.location.protocol + '//' + window.location.host;
								let url = `${host}/pages/order_pay_status/index?order_id=${orderId}`;
								let eUrl = encodeURIComponent(url);
								let jsurl = jsConfig.mweb_url || jsConfig.h5_url;
								let locations = `${jsurl}&redirect_url=${eUrl}`;
								setTimeout(() => {
									location.href = locations;
								}, 100);
								break;
							// #endif
				
							// #ifdef APP-PLUS
							case 'alipayApp':
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: jsConfig,
									success: (e) => {
										that.$emit('onChangeFun', {
											action: 'payClose'
										});
										return that.$util.Tips(
											{
												title: '支付成功',
												icon: 'success'
											},
											{
												tab: 5,
												url: goPages + 'status=1'
											}
										);
									},
									fail: (e) => {
										return that.$util.Tips({
											title: '取消支付'
										});
									},
									complete: () => {
										uni.hideLoading();
									}
								});
								break;
							// #endif
						}
					})
					.catch((err) => {
						uni.hideLoading();
						that.userHotelOrderDetail()
						return that.$util.Tips({
							title: err
						});
					});
			    				
			    
			    
			   
			},
			
			pay_complete: function() {
				this.$set(this, 'pay_close', false);
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
			},
			pay_success: function() {
				this.pay_close = false;
			},
			userHotelOrderDetail(){
				uni.showLoading({
					title:'请稍后...'
				})
				getHotelOrderDetail(this.order_id).then(res => {
					uni.hideLoading()
					this.order = res.data
					this.order_type = res.data.status == 2 ? 1 : 0
					this.totalPrice =  res.data.status == 2 ? res.data.wprice : res.data.tprice
				}).catch(err => {
					uni.hideLoading()
					return this.$util.Tips({
						title: err
					}); 
				})
			},
			goScenicArea: function(lng,lat,name) {
				
				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude:  parseFloat(lat),
					longitude: parseFloat(lng),
					name: name,
				});
			},
			orderCancel(){
				uni.showLoading({
					title:'请稍后...'
				})
				cancelOrder(this.order_id).then(res => {
					uni.hideLoading()
					this.$util.Tips({
						title: "取消订单成功！"
					});
					this.userHotelOrderDetail()
					uni.navigateBack()
				}).catch(err => {
					this.$util.Tips({
						title: err.msg
					});
				})
			},
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
   .list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.type-desc{
		background-color:var(--view-theme);
		color: #fff;
		padding: 1px 3px;
		border-radius: 3px;
	}
	.add_time{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.tytop{
		margin: 8px 5px;
	}
	.status_desc{
		margin-left: auto;
		color: #ff4231;
		font-weight: 700;
	}
	.dan{
		margin-left: 15px;
		font-size: 16px;
		font-weight: 700;
		color: #ff9419;
	}

  .ex-main{
		position: relative;
		margin: 60rpx 24rpx 0 24rpx;
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
	}
	.ex-color{
		color: #a7a7a7;
		font-size: 13px;
		margin-bottom: 13px;
	}
	.station_dot {
	    width: 17rpx;
	    height: 17rpx;
	    border-radius: 50%;
	    margin: 0 30rpx;
	}
	
	.station_dot_start {
	    background-color: rgb(142, 238, 25);
	}
	
	.station_dot_end {
	    background-color: rgb(243, 22, 22);
	}
	.line {
	    height: 2rpx;
	    background: #f0f0f0;
	}
	.address-box{
		background-image:url(https://qiniu.gzyxly.cn/attach/2025/11/16/14543ff02cecf9eeedd08316c0d9b29d.webp) ;
	    background-size: 100% 100%; ;
	}
	.main-c-button{
		background: var(--view-theme);
		color:#fff;
		padding:26rpx;
		font-size:30rpx;
		z-index:9;
		text-align:center;
		border-radius: 6px; 
	}
	.gr-c-button{
		background:#dadbdc;
		color:#6d6d6d;
		padding:26rpx;
		font-size:30rpx;
		z-index:9;
		text-align:center;
		border-radius: 6px;
	}
</style>